import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  ScrollView,
  FlatList,
  TouchableOpacity
} from 'react-native';
import Swiper from 'react-native-swiper';
import styles from '../../style';
import * as constant from '../../style/constant';
import Divider from '../../components/Divider';
import VerticalDivider from '../../components/VerticalDivider';
import MerchandiseShows from './MerchandiseShows';
import CommonIconButton from '../../components/common/CommonIconButton';

const cellWH = (constant.screenWidth - 40) / 2;
const hMargin = 25;
const renderPagination = (index, total, context) => {
  return (
    <View
      style={[
        {
          position: 'absolute',
          top: -30,
          width: '100%',
          flexDirection: 'row',
          justifyContent: 'space-between'
        }
      ]}>
      <Text style={{ color: '#222', fontSize: 16 }}>造作定义作品</Text>
      <Text style={{ color: '#222', fontSize: 12 }}>
        {index + 1}/<Text style={{ fontSize: 9 }}>{total}</Text>
      </Text>
    </View>
  );
};
export default class HomePage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    this.fetchData();
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
          <View style={{ height: 200 }}>
            <Swiper
              style={homeStyle.swiper}
              height={170}
              autoplay={true}
              autoplayTimeout={3}
              horizontal={true}
              paginationStyle={{ bottom: 10 }}
              showsButtons={false}
              dot={
                <View
                  style={{
                    //未选中的圆点样式
                    backgroundColor: 'rgba(0,0,0,.2)',
                    width: 5,
                    height: 5,
                    borderRadius: 4,
                    marginLeft: 3,
                    marginRight: 3,
                    marginTop: 9,
                    marginBottom: 9
                  }}
                />
              }
              activeDot={
                <View
                  style={{
                    //选中的圆点样式
                    backgroundColor: '#000',
                    width: 5,
                    height: 5,
                    borderRadius: 4,
                    marginLeft: 3,
                    marginRight: 3,
                    marginTop: 9,
                    marginBottom: 9
                  }}
                />
              }>
              <Image
                source={require('../../image/1.jpg')}
                style={homeStyle.img}
              />
              <Image
                source={require('../../image/2.jpg')}
                style={homeStyle.img}
              />
              <Image
                source={require('../../image/3.jpg')}
                style={homeStyle.img}
              />
              <Image
                source={require('../../image/4.jpg')}
                style={homeStyle.img}
              />
              <Image
                source={require('../../image/5.jpg')}
                style={homeStyle.img}
              />
              <Image
                source={require('../../image/6.jpg')}
                style={homeStyle.img}
              />
            </Swiper>
          </View>
          <View style={[styles.flexDirectionRow, styles.justifyAround]}>
            <CommonIconButton Icon={'sheji'} title="世界设计" />
            <CommonIconButton Icon={'pinpaibiaozhibarand'} title="欧标制造" />
            <CommonIconButton Icon={'wuliuqiache'} title="免费送装" />
            <CommonIconButton Icon={'7'} title="7日退换" />
          </View>
          <Divider style={{ marginTop: 10 }} />
          <View style={{ flex: 1, marginTop: 50, marginHorizontal: 15 }}>
            <Swiper
              style={styles.wrapper}
              loadMinimal
              loadMinimalSize={2}
              renderPagination={renderPagination}
              loop={false}
              height={230}>
              <View style={homeStyle.slide} title={<Text numberOfLines={1} />}>
                <MerchandiseShows
                  image={require('../../image/1.jpg')}
                  title={'荔枝台灯'}
                  money={4999}
                  number={3}
                  introduce={
                    '只需一件点睛，住入斯德哥尔摩，来自瑞典Jonas Wagell'
                  }
                />
              </View>
              <View style={homeStyle.slide} title={<Text numberOfLines={1} />}>
                <MerchandiseShows
                  image={require('../../image/2.jpg')}
                  title={'光笼R'}
                  money={699}
                  number={4}
                  introduce={
                    '双层金属网编，氛围造型大师，来自瑞典Note DesignStudio'
                  }
                />
              </View>
              <View style={homeStyle.slide} title={<Text numberOfLines={1} />}>
                <MerchandiseShows
                  image={require('../../image/3.jpg')}
                  title={'瓦格R-中高柜'}
                  money={4996}
                  number={3}
                  introduce={
                    '只需一件点睛，住入斯德哥尔摩，来自瑞典Jonas Wagell'
                  }
                />
              </View>
              <View style={homeStyle.slide} title={<Text numberOfLines={1} />}>
                <MerchandiseShows
                  image={require('../../image/4.jpg')}
                  title={'鹅卵石沙发'}
                  money={2299}
                  number={5}
                  introduce={'精致空间的摩登首选，来自瑞典Form Us With Love'}
                />
              </View>
            </Swiper>
          </View>
          <View style={{ flex: 1, marginTop: 30, marginHorizontal: 15 }}>
            <Text style={{ color: '#222', marginBottom: 15, fontSize: 16 }}>
              造作美学纪
            </Text>
            <View style={{ flex: 1, marginBottom: 10 }}>
              <Image
                style={{ width: '100%', height: 100 }}
                source={require('../../image/10.jpg')}
              />
            </View>
            <View
              style={{
                flex: 1,
                flexDirection: 'row'
              }}>
              <View style={{ flex: 1 }}>
                <Image
                  style={{ width: '100%', height: 100 }}
                  source={require('../../image/6.jpg')}
                />
              </View>
              <View style={{ flex: 1, marginHorizontal: 10 }}>
                <Image
                  style={{ width: '100%', height: 100 }}
                  source={require('../../image/9.jpg')}
                />
              </View>
              <View style={{ flex: 1 }}>
                <Image
                  style={{ width: '100%', height: 100 }}
                  source={require('../../image/8.jpg')}
                />
              </View>
            </View>
          </View>
          <Divider style={{ marginTop: 20 }} />
          <View style={{ flex: 1, marginTop: 30, marginHorizontal: 15 }}>
            <Text style={{ color: '#222', fontSize: 16 }}>全品目录</Text>
            <Divider
              style={{
                marginTop: 10,
                height: StyleSheet.hairlineWidth
              }}
            />
            <View
              style={{
                marginTop: 25,
                alignItems: 'center',
                justifyContent: 'center'
              }}>
              <CommonIconButton
                Icon={'7'}
                size={26}
                fontSize={14}
                title="沙发 SOFA"
              />
              <View style={{ flexDirection: 'row', marginTop: 10 }}>
                <Text style={homeStyle.selectedTag}>三人</Text>
                <VerticalDivider />
                <Text style={homeStyle.selectedTag}>双人</Text>
                <VerticalDivider />
                <Text style={homeStyle.selectedTag}>单人</Text>
                <VerticalDivider />
                <Text style={homeStyle.selectedTag}>大三人</Text>
                <VerticalDivider />
                <Text style={homeStyle.selectedTag}>更多</Text>
              </View>
              <View style={homeStyle.container}>
                <FlatList
                  data={this.state.data}
                  renderItem={this.renderItem}
                  keyExtractor={(item, index) => index}
                  contentContainerStyle={homeStyle.listContainer}
                />
              </View>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
  renderItem({ item, index }) {
    return (
      <TouchableOpacity activeOpacity={0.5}>
        <View style={homeStyle.item}>
          <Image
            source={{ uri: item.posters.thumbnail }}
            style={{ width: cellWH, height: 150, borderRadius: 5 }}
          />
          <Text style={{ marginTop: 5, textAlign: 'center' }} numberOfLines={1}>
            {item.title}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }
  fetchData() {
    var REQUEST_URL =
      'https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json';
    fetch(REQUEST_URL)
      .then(response => response.json())
      .then(responseData => {
        // 注意，这里使用了this关键字，为了保证this在调用时仍然指向当前组件，我们需要对其进行“绑定”操作
        this.setState({
          data: this.state.data.concat(responseData.movies),
          loaded: true
        });
      });
  }
}
const homeStyle = StyleSheet.create({
  swiper: {},
  img: {
    width: '100%',
    height: 170
  },
  slide: { flex: 1, justifyContent: 'center', backgroundColor: 'transparent' },
  container: {
    flex: 1,
    paddingVertical: 10
  },
  listContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    alignItems: 'center'
  },
  item: {
    width: cellWH,
    marginBottom: hMargin,
    alignItems: 'center'
  },
  selectedTag: {
    fontSize: 9,
    color: '#222'
  }
});
